html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    font: 11px/18px Verdana, Tahoma, Arial, sans-serif;
    width: 100%;
   /* background:url(../images/bg.png);*/
    color:#7e7f7f;
}
a {
    color: #127aa1;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
/* Begin of styles for the demonstration (you can remove them) */
a.expand {
    width: 150px;
    display: block;
    margin: 10px 0 0;
}
a.expand:hover {
    height: 500px;
}
/* End of of styles for the demonstration */
p {
    margin: 10px 0;
}
img {
    border: none;
}
input {
    vertical-align: middle;
}

.right{float:right;}
.left{float:left;}


/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

html[xmlns] .clearfix {
    display: block;
}

/* http://sonspring.com/journal/clearing-floats */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */
.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

/*
        The following zoom:1 rule is specifically for IE6 + IE7.
        Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}



#wrapper {
    width: 960px;
    margin: 0 auto;
    /*
    -webkit-box-shadow: 0 0 15px #666;
    -moz-box-shadow: 0 0 15px #666;
    box-shadow: 0 0 15px #666;
    padding: 0 15px;
    background:#fff;
    */
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    padding-top:10px;
}


/* Middle
-----------------------------------------------------------------------------*/
#middle {
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#middle.full{border:none;}

.container {
    width: 100%;
    float: left;
    margin-right: -100%;
}
#content {
    padding: 0 20px 20px;
    text-align:justify;
}


/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
    float: left;
    width: 200px;
    position: relative;
    left: -200px;
}


/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
    float: right;
    margin-right: -200px;
    width: 200px;
    position: relative;
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
    margin-top:10px;
}

/* Icon
-----------------------------------------------------------------------------*/
.register{background:url(../images/form-icon.png) no-repeat;}
.register:hover{background:url(../images/form-icon-on.png) no-repeat;}
.login{background:url(../images/keys-icon.png) no-repeat;}
.login:hover{background:url(../images/keys-icon-on.png) no-repeat;}

/* Custom Style
-----------------------------------------------------------------------------*/

h2{font-size: 18px;padding-bottom: 8px;border-bottom: 1px solid #ccc;margin-bottom: 10px; text-align:left;}
h3{text-transform:uppercase;color:#127aa1; font-size:13px;padding:0 0 8px 0;text-align:left;}
h4{text-transform:uppercase;color:#127aa1;font-size:11px;text-align:left;}

.tagline{display:inline-block;margin-top:30px;}
.info-cart{text-align:right;}
.top-menu{padding-top:10px;}
.navigation{padding:5px 0;}

.head-menu{margin-top:15px;}
.h-menu{list-style:none; text-align:right;}
.h-menu li{float:left; text-align:center;}
.h-menu li a{padding:1px 10px; text-decoration:none; color:#7e7f7f; background-position:right center; text-align:left;}
.h-menu li a:hover{background-position:right center;}

.top-menu .h-menu{padding-top:15px;}
.top-menu .h-menu li a{padding: 8px 35px 8px 15px; }
.top-menu .h-menu li a.login{padding-right:25px;}

.social .h-menu li a{padding:0 1px 0;}

.main-menu{background:url(../images/line-menu.png) repeat-x top,url(../images/line-menu.png) repeat-x bottom; padding: 8px 0;width:855px;}
.main-menu .h-menu li a{font-weight:bold;}
.main-menu .h-menu li a:hover,.main-menu .h-menu li a.selected{color:#127aa1;}


.search-box{background:url(../images/search-box.png) no-repeat center; padding:5px 0 5px 9px; margin-left:20px;}
.search-box form{width: 204px;}
.search-box .input{background:url(../images/search-input.png) no-repeat center;border: none;width: 153px;padding:8px; color:#7e7f7f;font-size:11px;}
.search-box .button{border:none;background:url(../images/search-btn.png) no-repeat center; padding: 3px 10px;;cursor: pointer;}

.site-info{padding:15px; background:#c8c8c8;border: 1px solid #bbb;}
.box-info{width: 222px;padding-left: 10px;color: #605e5e;}
.box-info a{color:#605e5e;}
.box-info h3{font-size:12px;color:#605e5e;text-transform:none;}

.copy{padding:5px 0;}
.copy a{text-decoration:none;}
.copy .right{color:#127aa1;}
.license{text-align:center;padding-bottom:10px;}

.bottom {padding:20px 0;border-top: 1px solid #ccc;}
.bottom .box{float:left; width:292px; background:url(../images/v-devider.png) repeat-y right center; padding:4px 14px;}
.bottom .box.last{background:none;}
.bottom .box .box-ct{text-align:right;}

.box .heading{background:url(../images/bg-box-heading.png) no-repeat;padding-left:10px;color:#fff;}
.box .img{float:left;padding-right:8px;padding-bottom:8px;}

.more{background:url(../images/more-btn.png) no-repeat; display:inline-block;width:100px; height:24px;text-decoration:none;margin-top:5px;}
.more:hover{background:url(../images/more-btn-on.png) no-repeat;}

.v-menu{padding-left:15px;padding-bottom:15px;}
.v-menu li{list-style-type: disc;}
.v-menu li a{color:#7e7f7f;text-decoration:none;}
.v-menu li a:hover{font-weight:bold;color:#127aa1;}

.grid{list-style-type:none !important;}
.grid li{float: left;width: 33%;text-align: center;}
.grid li a{color:#7e7f7f;text-decoration:none;text-align:center;}
.grid li a:hover{font-weight:bold;color:#127aa1;}
.grid li a .img{background:url(../images/bg-prod.png) no-repeat center top;height:140px;}
.grid li a .img:hover{background:url(../images/bg-prod-on.png) no-repeat center top;}
.grid li a .img img{margin-top:17px;}

.pager .paging, .pager .selector{background:#0bacca;padding:3px 8px;border-bottom:1px solid #fff;color:#fff;}
.pager .paging a, .pager .selector a{color:#fff;text-decoration:none;}
.pager .paging a{padding:0 3px;}
.pager .paging{text-align:center;}

.banner{text-align:center;}

.product-detail .img-prod{width:217px;}
.product-detail .dtl-prod{width: 290px;}
.product-detail .dtl-prod p{padding:0;margin:5px 0;}
.product-detail .dtl-prod strong{color:#127aa1;font-size:12px;}
.product-detail .dtl-prod .retailer, .product-detail .dtl-prod .hrg-prod{background:#127aa1;border-bottom:1px solid #fff;color:#fff;padding:2px 5px;}
.product-detail .dtl-prod .retailer{margin-bottom:5px;}
.product-detail .dtl-prod .retailer input{text-align:center;}
.img-list{margin-top:5px;list-style-type:none !important;}
.img-list li{float:left;text-align:center;width:33%;}
.title-prod{padding:3px 8px; color:#fff; background:#127aa1;}

.breadcrumb{margin-bottom:10px;}

#content ul{list-style-type:disc;padding-left:18px;}
#content ol{list-style-type:decimal;padding-left:18px;padding-bottom:10px;}

.sliding{width:282px; height:370px}

#content .inner-content{padding-right:15px;width:608px;height: 370px; overflow-y: auto;}

.index-content{margin-bottom:10px;}
.index-content a{display:inline-block;background:#ccc;padding:5px;margin-bottom:1px;text-decoration:none;height: 56px;max-height:56px;font-size:9px;line-height:1.6em;}
.index-content a.selected{background:#08294f;color:#fff;}
.index-content .right{width:300px;}
.index-content .right img{float:left;margin-right:5px;}

.inner-content .cols {padding-top:10px;}
.inner-content .cols .col2{width:45%;}

.btn-reg {
    width:100px;
    height:24px;
    display:block;
    border: 0;
    background: transparent url('../images/register-btn.png') no-repeat center top;
    overflow: hidden;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
}

.btn-reg:hover {
    background: transparent url('../images/register-btn-on.png') no-repeat center top;
}

.btn-login {
    width:100px;
    height:24px;
    display:block;
    border: 0;
    background: transparent url('../images/login-btn.png') no-repeat center top;
    overflow: hidden;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
}

.btn-login:hover {
    background: transparent url('../images/login-btn-on.png') no-repeat center top;
}


.btn-kirim {
    width:100px;
    height:24px;
    display:block;
    border: 0;
    background: transparent url('../images/submit-btn.png') no-repeat center top;
    overflow: hidden;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
}